import * as echarts from 'echarts'

/**
 * 3D柱状图
 * @param el
 * @param params
 * @author 赵京涛
 */
export const useBar3DCharts = (el, params) => {
  const myChart = echarts.init(el)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (parms) {
        let resResult = parms[0].seriesName + '<br>'
        resResult += parms[0].marker + parms[0].name + '：' + parms[0].value + '（个）' +'<br>'
        return resResult;
      },
    },
    legend: {
      show: true,
      data: params?.lengendData || [],
      textStyle: { fontSize: 12, color: '#000' },
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 15,
    },
    textStyle: {
      color: '#000',
    },
    color: ['#24F3FF', '#24F3FF', '#FDBF47', '#FDBF47'],
    grid: {
      containLabel: true,
      left: '6%',
      top: '20%',
      bottom: '6%',
      right: '6%',
    },
    xAxis: {
      type: 'category',
      data: params?.xData || [],
      axisLine: {
        lineStyle: {
          color: '#B5B5B5',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 10, //刻度标签与轴线之间的距离。
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: '#000',
        },
      },
    },
    yAxis: {
      name: params.yAxisName,
      nameTextStyle: {
        verticalAlign: 'middle',
        align: "right"
      },
      type: 'value',
      min: 0,
      boundaryGap: ['20%', '60%'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#B5B5B5',
        },
      },
      splitLine: {
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#B5B5B5'],
          type: 'dashed',
          opacity: 0.5,
        },
      },
      axisLabel: {},
    },
    series: [
      {
        name: params?.seriesName || [],
        data: params?.seriesData || [],
        stack: 'zs',
        type: 'bar',
        barMaxWidth: 'auto',
        barWidth: 22,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#0FA0FF',
              },
              {
                offset: 1,
                color: '#24F3FF',
              },
            ],
          },
        },
      },
      {
        data: params?.seriesData || [],
        type: 'pictorialBar',
        barMaxWidth: '10',
        symbolPosition: 'end',
        symbolOffset: [0, '-50%'],
        symbolSize: [22, 10],
        zlevel: 2,
        color: '#24F3FF'
      },
    ],
  }
  option && myChart.setOption(option)
}
